<template>
  <view class="main">
    <view class="zl-flex"
          style="margin-top: calc(35rpx + 160rpx);">
      <view class="">
        <image v-if="userInfo.avatarUrl"
               :src="userInfo.avatarUrl "
               mode=""
               style="width: 110rpx;height:110rpx;border-radius: 50%;overflow: hidden;"></image>
        <image v-else
               style="width: 110rpx;height: 110rpx;border-radius: 50%;overflow: hidden;"
               src="/static/my/avatar.png"></image>
      </view>
      <view class="zl-color-white zl-m-l-30 zl-flex-col">
        <view class="zl-flex">
          <text class="zl-font-36 zl-m-r-16">{{userInfo.nickNam?userInfo.nickName:'微信昵称'}}</text>
          <image v-if="balanceInfo.endTime===0"
                 src="/static/my/no_vip.png"
                 mode=""
                 style="width: 42rpx;height: 32rpx;"></image>
          <image v-else
                 src="/static/my/vip.png"
                 mode=""
                 style="width: 42rpx;height: 32rpx;"></image>
        </view>
        <!-- <text class="zl-font-22 zl-m-t-10" style=" opacity: 0.5;">ID:{{balanceInfo.endTime}}</text> -->
        <view class="zl-flex">
          <text class="zl-m-t-6 zl-font-22"
                style="opacity: 0.5;"
                user-select>ID:{{balanceInfo.userId}}</text>
          <view class="copy-box"
                @click="$util.copy(balanceInfo.userId.toString())"> 复制 </view>
        </view>
        <!-- <text class="zl-font-22 zl-m-t-6" v-else style="opacity: 0.5;">请充值会员</text> -->
      </view>
    </view>
    <view class="banner"
          style="position: relative;">
      <view class="zl-flex zl-row-between">
        <view class="zl-color-000 zl-font-500">
          资源包
        </view>
        <view class="renew"
              @click="renew">
          {{balanceInfo.endTime===0?'激活':'续费'}}
        </view>

      </view>
      <view class="">
        <text class="zl-font-22 "
              v-if="balanceInfo.endTime!==0"
              style="opacity: 0.5;">会员有限期至：{{$util.fomateDate(balanceInfo.endTime/1000)}}</text>
        <text class="zl-font-22"
              v-else
              style="opacity: 0.5;">请充值会员</text>
      </view>
      <view style="width: 620rpx;margin-top: 22rpx;border-bottom: 1rpx solid #bccee3;">
        <!-- <view class="progress-outer">
          <view class="progress-inner"
                :style="{'width':pro+'%'}">
          </view>
        </view> -->
      </view>
      <view class="zl-flex zl-row-between zl-m-t-34"
            @click="toPackageList">
        <view class="zl-color-000  zl-flex-col zl-col-center"
              style="width: 28%;white-space: nowrap;">
          <text class="zl-font-26  zl-font-600"
                v-if="balanceInfo.digitalCount!==infinite">{{balanceInfo.digitalCount}}/{{balanceInfo.maxDigitalCount}}</text>
          <text class="zl-font-26  zl-font-600"
                v-else>不限</text>
          <text class="zl-font-22 zl-m-t-6"
                style="opacity: 0.5;">数字分身数量(个)</text>
        </view>
        <view class="zl-color-000 zl-flex-col zl-col-center"
              style="width: 28%;white-space: nowrap;border-right: 1rpx solid #bccee3;">
          <text class="zl-font-26 zl-font-600  "
                v-if="balanceInfo.voiceCount!==infinite">{{balanceInfo.voiceCount}}/{{balanceInfo.maxVoiceCount}}</text>
          <text class="zl-font-26  zl-font-600"
                v-else>不限</text>
          <text class="zl-font-22 zl-m-t-6"
                style="opacity: 0.5;">人声数量(个)</text>
        </view>
        <view class="zl-color-000  zl-flex-col zl-col-center"
              style="width: 44%;white-space: nowrap;">
          <text class="zl-font-26 zl-font-600">{{balanceInfo.produceCount}}/{{balanceInfo.maxProduceCount}}</text>
          <text class="zl-font-22 zl-m-t-6"
                style="opacity: 0.5;">作品生成算力(点)</text>
        </view>
      </view>
      <!-- <view class="zl-flex zl-color-white zl-font-24" @click="toPackageList"
				style="position: absolute;bottom: 44rpx;right: 30rpx;">
				我的资源包 <image style="width: 12rpx;height: 24rpx;margin-left: 10rpx;"
					src="../../static/my/right_white.png"></image>
			</view> -->
    </view>
    <!-- <view class="recordDetail zl-m-b-30">
			<view class="title zl-flex zl-col-center ">
				<view class="line">
				</view>
				<view class="zl-font-30 zl-color-000 zl-m-l-20">
					记录明细
				</view>
			</view>
			<view class="box">
				<view class="box_item">
					数字人克隆记录
				</view>
				<view class="box_item">
					声音克隆记录
				</view>
				<view class="box_item">
					数字人视频记录
				</view>
				<view class="box_item">
					文字转语音记录
				</view>
			</view>
		</view> -->
    <view class="accountDetails zl-m-t-60"
          @click="toDetail">
      <view class="title zl-flex zl-col-center ">
        <image src="/static/my/detail.png"
               mode=""
               style="width: 30rpx;height: 30rpx;"></image>
        <view class="zl-font-30 zl-color-333 zl-m-l-20"> 账户明细 </view>
      </view>
      <image src="/static/my/right.png"
             mode=""
             style="width: 14rpx;height: 26rpx;"></image>
    </view>
    <view class="accountDetails zl-m-t-30"
          @click="toPackageList">
      <view class="title zl-flex zl-col-center ">
        <image src="/static/my/bag.png"
               mode=""
               style="width: 30rpx;height: 30rpx;"></image>
        <view class="zl-font-30 zl-color-333 zl-m-l-20"> 已买资源包 </view>
      </view>
      <image src="/static/my/right.png"
             mode=""
             style="width: 14rpx;height: 26rpx;"></image>
    </view>
    <!-- <view class="accountDetails zl-m-t-30"
          @click="call">
      <view class="title zl-flex zl-col-center ">
        <image src="/static/my/jiaoxue.png"
               mode=""
               style="width: 30rpx;height: 30rpx;"></image>
        <view class="zl-font-30 zl-color-333 zl-m-l-20"> 联系我们 </view>
      </view>
      <image src="/static/my/right.png"
             mode=""
             style="width: 14rpx;height: 26rpx;"></image>
    </view> -->
    <view class="accountDetails zl-m-t-30"
          @click="toLearn"
          v-if="isShowJiaochen">
      <view class="title zl-flex zl-col-center ">
        <image src="/static/my/jiaoxue.png"
               mode=""
               style="width: 30rpx;height: 30rpx;"></image>
        <view class="zl-font-30 zl-color-333 zl-m-l-20"> 教学视频 </view>
      </view>
      <image src="/static/my/right.png"
             mode=""
             style="width: 14rpx;height: 26rpx;"></image>
    </view>
    <view class="accountDetails zl-m-t-30"
          @click="toUpdate">
      <view class="title zl-flex zl-col-center ">
        <image src="/static/my/update.png"
               mode=""
               style="width: 40rpx;height: 40rpx;"></image>
        <view class="zl-font-30 zl-color-333 zl-m-l-20"> 更新公告 </view>
      </view>
      <image src="/static/my/right.png"
             mode=""
             style="width: 14rpx;height: 26rpx;"></image>
    </view>
    <view class="notice_box zl-flex zl-row-center"
          v-if="isShowurl">
      <view class="noticetips"> 电脑端已上线，在电脑上也可以操作啦~ </view>
      <view class="copy_box"
            @click="copy"> 复制链接 </view>
    </view>
    <PrivacyPoup></PrivacyPoup>
    <uni-popup ref="popup"
               type="dialog">
      <uni-popup-dialog ref="inputClose"
                        mode="input"
                        title="卡密激活"
                        v-model="cdkey"
                        placeholder="请输入卡密"
                        @confirm="submitCdkey"></uni-popup-dialog>
    </uni-popup>
  </view>
</template>
<script>
import PrivacyPoup from '@/components/PrivacyPoup.vue';
export default {
  components: {
    PrivacyPoup,
  },
  data () {
    return {
      isShowurl: getApp().globalData.isShowurl,
      isShowJiaochen: getApp().globalData.isShowJiaochen,
      infinite: -99999999,
      userInfo: {
        avatarUrl: '',
        nickName: ''
      },
      balanceInfo: {
        digitalCount: 0,
        maxDigitalCount: 0,
        voiceCount: 0,
        maxVoiceCount: 0,
        produceCount: 0,
        maxProduceCount: 0,
        endTime: 0
      },
      cdkey: '',
    };
  },
  onShareAppMessage (res) {
    return {
      title: getApp().globalData.shareTitle,
      imageUrl: getApp().globalData.shareImg,
      path: '/pages/index/index',
    };
  },
  onLoad () {
    this.getuserinfo()

  },
  async onShow () {
    await this.$onLaunched;
    this.getassetamount();
  },
  methods: {
    toUpdate () {
      uni.navigateTo({
        url: '/pages/update/update'
      })
    },
    copy () {
      const url = getApp().globalData.url
      this.$util.copy(url)
    },
    call () {
      const url =
        'https://oop-zl-com-base.oss-cn-hangzhou.aliyuncs.com/static/xiaoyao.jpg';
      uni.previewImage({
        urls: [url],
        complete: (complete) => {
          console.log(complete);
        }
      })
    },
    // 获取账户信息
    getuserinfo () {
      this.api.account.getuserinfo().then(res => {
        if (res.code === 0) {
          this.userInfo = res.data;
        } else {
          this.$util.msg(res.msg);
        }
      }).catch(err => {
        this.$util.msg('请检查网络连接！');
      })
    },
    // 获取账号资源总计
    getassetamount () {
      this.api.account.getassetamount().then(res => {
        if (res.code === 0) {
          this.balanceInfo = res.data;
        } else {
          this.$util.msg(res.msg);
        }
      }).catch(err => {
        this.$util.msg('请检查网络连接！');
      })
    },
    // 跳转到账户明细
    toDetail () {
      uni.navigateTo({
        url: '/pages/balanceDetail/balanceDetail'
      })
    },
    // 跳转到资源包列表
    toPackageList () {
      uni.navigateTo({
        url: '/pages/packageList/packageList'
      })
    },
    toLearn () {
      uni.navigateTo({
        url: '/pages/learn/jiaochen'
      })
    },
    // 续费
    renew () {
      this.cdkey = '';
      this.$refs.popup.open()
    },
    // 激活卡密
    submitCdkey () {
      // 激活卡密
      if (!this.cdkey) {
        this.$util.msg('请输入卡密！');
        return;
      }
      this.api.account.usecdkey({
        cdkey: this.cdkey,
      }).then(res => {
        if (res.code === 0) {
          this.$refs.popup.close()
          this.cdkey = '';
          this.$util.msg(res.msg);
          this.getuserinfo()
          this.getassetamount()
        } else {
          this.$util.msg(res.msg);
        }
      }).catch(err => {
        this.$util.msg('请检查网络连接！');
      })
    },
  }
}
</script>
<style lang="scss">
@import "css/my_bg.scss";

.main {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background: url($bg02) no-repeat;
  background-size: 100% 101%;
  padding: 30rpx;

  .banner {
    margin-top: 72rpx;
    width: 690rpx;
    height: 300rpx;
    background: url($bg03) no-repeat;
    background-size: 100% 100%;
    padding: 35rpx 30rpx 0 35rpx;
  }

  .renew {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140rpx;
    height: 58rpx;
    background: #000000;
    border-radius: 31rpx;
    font-weight: 500;
    font-size: 26rpx;
    color: #fff;
  }

  .progress-outer {
    width: 100%;
    height: 13rpx;
    background-color: #ebeef5;
    border-radius: 8rpx;
    background-color: #4b4b4b;
    position: relative;
  }

  .progress-outer .progress-inner {
    position: absolute;
    /* 只需要把这个宽度动态即可 */
    height: 100%;
    left: 0;
    top: 0;
    background-color: #67e550;
    border-radius: 8rpx;
    transition: width 0.6s ease;
    text-align: right;
    line-height: 13rpx;
  }

  .recordDetail {
    margin-top: 68rpx;
    width: 690rpx;
    height: 408rpx;
    background: #ffffff;
    border-radius: 20rpx;
    border: 1rpx solid #dad9d9;
    padding: 44rpx 30rpx;

    .box {
      margin-top: 40rpx;
      display: flex;
      flex-wrap: wrap;
      gap: 20rpx;

      .box_item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48%;
        height: 112rpx;
        background: #ededed;
        border-radius: 4rpx;
        font-size: 26rpx;
        color: #666666;
      }
    }
  }

  .line {
    width: 6rpx;
    height: 34rpx;
    background: #eb5e00;
    border-radius: 3rpx;
  }

  .accountDetails {
    width: 690rpx;
    height: 120rpx;
    background: #e9ebf5;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36rpx;
  }
}

.copy-box {
  width: 62rpx;
  height: 28rpx;
  border-radius: 14rpx;
  border: 1rpx solid #999;
  text-align: center;
  line-height: 28rpx;
  font-size: 18rpx;
  color: #999;
  line-height: 26rpx;
  margin-left: 8rpx;
}
.notice_box {
  height: 80rpx;
  margin-top: 30rpx;

  .noticeIcon {
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }

  .noticetips {
    font-size: 24rpx;
    color: #333;
  }

  .copy_box {
    width: 128rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 32rpx;
    border: 2rpx solid #333;
    text-align: center;
    font-size: 22rpx;
    color: #333;
    margin-left: 10rpx;
  }
}
</style>